import {useState,useEffect} from 'react';
import Taro from '@tarojs/taro';
import {Text} from '@tarojs/components'
import NavBar from '../../component/navbar';
import {Image} from '@tarojs/components';
import Styles from './index.module.less';
import {getGlobalData, Request} from '../../util';

export default function index(){

    const navBarHeight = Taro.getStorageSync("navBarHeight");

    const domain = getGlobalData('domain');

    const [redeemCode, setRedeemCode] = useState("***");

    const handleGiftCodeBtn = () => {
        Request(domain+"/client/gift/getRedeemCode",{openid:Taro.getStorageSync('openid')}).then((res)=>{
            let {redeemCode} = res.data.data;
            setRedeemCode(redeemCode);
        })
    }

    return (
        <view>
            <NavBar title="换领登记" backTo="prev"/>
            <Image src="http://cdn.henrywong01.top/gift/giftPoster_new.jpeg" class={Styles.poster} style={{marginTop:navBarHeight}}/>
            <view class={Styles.header}>精选美容疗程体验</view>

            <view class={Styles.giftCodeWrap} onClick = {handleGiftCodeBtn}>
                    <view class={Styles.tip}>换领编号：</view> 
                    <view class={Styles.code}> {redeemCode} </view> 
                    {redeemCode == "***" && 
                        <view class={Styles.btn}>点击查看编号</view>
                    }
            </view>

            <view class={Styles.missionWrap}>
                <view class={Styles.h1}>
                    礼品换领方法
                </view>
                <view class={Styles.h2}>【高端奢养疗程体验】</view>
                <view class={Styles.step} style={{marginTop:"10px"}}>
                    礼品换领方法步骤:
                </view>
                <view class={Styles.step} style={{marginTop:"5px"}}>
                    1.点击本页面的“查看编号按钮”
                </view>
                <view class={Styles.step} style={{marginTop:"5px"}}>
                    2.在小程序上预约疗程
                </view>
                <view class={Styles.step} style={{marginTop:"5px"}}>
                    3.前往门店前台通过换领编号获取礼品
                </view>
                <view class={Styles.present} style={{marginTop:"5px"}}>
                    · SPL深层净澈头皮疗程
                </view>
                <view class={Styles.present} style={{marginTop:"5px"}}>
                    · 高端气垫护发梳一套
                </view>
            </view>
        </view>
    )
}